<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello MiniUI!</title>
    <!--jQuery js-->
    <script th:src="@{/miniui/jquery.min.js}" type="text/javascript"></script>
    <!--MiniUI-->
    <link th:href="@{/miniui/miniui.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/miniui/miniui.js}" type="text/javascript"></script>
</head>
<body>

    <div id="userGrid" class="mini-datagrid" style="width:800px;height:280px;"
         sizeList="[10,20]"
         pageSize="20"
         ajaxType="get"
         url="/users">
        <div property="columns">
            <div field="id" >编号
                <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>
            <div field="userName" >姓名
                <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>
            <div field="age" >年龄
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $(function () {
            mini.parse();
            InitUserGrid();
        });

        function InitUserGrid() {
            var userGrid=mini.get("userGrid");
            userGrid.on("drawcell",function (e) {
                for (var i = 0; i < userGrid.length; i++) {
                    var record = e.record, column = e.column, field = e.field, value = e.value;
                    var  id= e.columns.id;
                    var userName=e.columns.userName;
                    var age=e.columns.age;
                    e.cellHtml = "<div>" + id +age+ userName + "</div>";
                }
            });

            var userName = mini.get("userName") != null ? mini.get("userName").getValue() : "";
            var age = mini.get("age") != null ? mini.get("age").getValue() : "";
            var id = mini.get("id") != null ? mini.get("id").getValue() : "";

            userGrid.load({
                "age": age,
                "id": id,
                "userName": userName
            });
        }
    </script>

</body>
</html>